<template>
  <div class="tzl_test">
    <div v-if="showType === 'input'" class="form_item" style="width: 300px">
      <h5>input</h5>
      <h6>input 基础组件</h6>
      <input-base
        v-model="inputBaseValue"
        prop="input"
        prependSlot="prependBase"
        @itemEvent="itemEvent"
      >
        <template #prepend>66</template>
      </input-base>
      <h6>input 文本域</h6>
      <input-base
        type="textarea"
        v-model="inputTextareaValue"
        prop="inputTextarea"
        @itemEvent="itemEvent"
      >
      </input-base>
      <h6>input 数字</h6>
      <input-number
        :point="2"
        :isMinus="true"
        :isThousands="true"
        v-model="inputNumberValue"
        @itemEvent="itemEvent"
      ></input-number>
    </div>

    <div v-if="showType === 'select'" class="form_item" style="width: 300px">
      <h5>select</h5>

      <h6>select 基础组件</h6>
      <select-base
        v-model="selectBaseValue"
        :requestUrl="requestUrl"
        :params="params"
        :filterKey="filterKey"
        :multiple="true"
      ></select-base>

      <h6>table form 联动</h6>
      <select-base
        prop="primaryId"
        v-model="formData.primaryId"
        :requestUrl="catefory1Url"
        :filterKey="{ label: 'name', value: 'id' }"
        @itemEvent="itemEvent"
      ></select-base>
      <select-ganged
        v-model="formData.catefory2"
        :requestUrl="catefory2Url"
        :filterKey="{ label: 'name', value: 'id' }"
        :row="formData"
        :dynamicParam="catefory2Params"
        ref="catefory2"
      ></select-ganged>
      <h6>远程搜索</h6>
      <select-remote
        v-model="remoteValue"
        :requestUrl="remoteUrl"
        :filterKey="{ label: 'name', value: 'id' }"
        tierData="data.costcode"
        remoteQueryKey="param"
        @itemEvent="itemEvent"
      ></select-remote>
    </div>

    <div v-if="showType === 'date'" class="form_item" style="width: 300px">
      <h5>date</h5>
      <h6>date 基础组件</h6>
      <date-base v-model="date" @itemEvent="itemEvent" v-bind="dateConfig"></date-base>
    </div>

    <div v-if="showType === 'switch'" class="form_item" style="width: 300px">
      <h5>switch</h5>
      <h6>switch 基础组件</h6>
      <switch-base v-model="switchBaseValue"></switch-base>
    </div>

    <el-button class="get_file" @click="getFormValue">Form 元素值打印</el-button>
  </div>
</template>

<script setup>
import InputBase from '@/components/input/InputBase.vue';
import InputNumber from '@/components/input/InputNumber.vue';
import SelectBase from '@/components/select/SelectBase.vue';
import SelectGanged from '@/components/select/SelectGanged.vue';
import SelectRemote from '@/components/select/SelectRemote.vue';
import DateBase from '@/components/date/DateBase.vue';
import SwitchBase from '@/components/switch/SwitchBase.vue';

const showType = $ref('date');

const inputBaseValue = $ref('');
const inputTextareaValue = $ref('123');
const inputNumberValue = $ref('');
const selectBaseValue = $ref('');

const requestUrl = $ref('http://183.215.127.149:8070/procurement/dataDictionary/selectDict');
const params = $ref({ dictType: 'asset_purchase_main' });
const filterKey = $ref({
  label: 'dictName',
  value: 'dictCode',
});
let formData = $ref({
  primaryId: '',
  catefory2: '',
});
let catefory2 = $ref();
let remoteValue = $ref('');

let date = $ref('');

let switchBaseValue = $ref();

const catefory1Url = $ref(
  'http://183.215.127.149:8070/asset/assetManagementCategory/getPrimarySelectBySecondaryCount'
);
const catefory2Url = $ref(
  'http://183.215.127.149:8070/asset/assetManagementCategory/getSecondarySelect'
);
const catefory2Params = $ref(['primaryId']);

const remoteUrl = $ref('http://183.215.127.149:8070/account/Reimbursing/selectCostcodeByLike');

const dateConfig = {
  type: 'datetimerange',
  format: 'YYYY-MM-DD HH:mm',
  'time-format': 'hh:mm',
  disabledType: 'sameDay',
};

function getFormValue() {
  console.log(inputBaseValue, 'inputBaseValue');
  console.log(inputNumberValue, 'inputNumberValue');
  console.log(selectBaseValue, 'selectBaseValue');
  console.log(inputTextareaValue, 'inputTextareaValue');
  console.log(remoteValue, 'remoteValue');
  console.log(date, 'date');
  console.log(formData, 'formDataformData');
}

function itemEvent(scoped) {
  const { eventName, prop, value } = scoped;
  if (eventName === 'change' && prop === 'primaryId') {
    catefory2.getDataList();
  }
}
</script>
<style lang="scss" scoped>
h5 {
  font-size: 16px;
}
h6 {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 10px;
  position: relative;
  padding-left: 6px;
}
h6::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 15px;
  display: block;
  background: #409eff;
  top: 2px;
  left: 0;
}
.tzl_test {
  margin: 20px;
}
.get_file {
  margin: 20px;
}
</style>
